import React, { useState, useTransition } from 'react';
import { NavLink } from 'react-router-dom';
import { menu_router } from '../router/Index';
import { Outlet } from 'react-router-dom';
import { Breadcrumb, Button, Layout, Menu, theme } from 'antd';
import './index.css'


function Zhu() {

  const [name,setName]=useState('huan')
  const [name1,setName1]=useState('enen')
  const zhuti=()=>{
   setName(name=='huan'?'huan1':'huan')
   setName1(name=='enen'?'enen1':'enen')
  }

    const { Header, Content, Footer, Sider } = Layout;
function getItem(label, key, icon, children) {
  return {
    key,
    icon,
    children,
    label,
  };
}
const erji=(arr)=>{
    let items=[]
    arr&&arr.forEach((item)=>{
        if(item.children){
            items.push(getItem(<NavLink to={item.path}>{item.title}</NavLink>, item.path,item.icon,erji(item.children)))
        }else{
            items.push(getItem(<NavLink to={item.path}>{item.title}</NavLink>, item.path,item.icon),)
        }
    })
    return items
}
const items=erji(menu_router)
    // const items = [
    //     getItem('Option 1', '1', <PieChartOutlined />),
    //     getItem('Option 2', '2', <DesktopOutlined />),
    //     getItem('User', 'sub1', <UserOutlined />, [
    //       getItem('Tom', '3'),
    //       getItem('Bill', '4'),
    //       getItem('Alex', '5'),
    //     ]),
    //     getItem('Team', 'sub2', <TeamOutlined />, [getItem('Team 1', '6'), getItem('Team 2', '8')]),
    //     getItem('Files', '9', <FileOutlined />),
    //   ];
      const [collapsed, setCollapsed] = useState(false);
      const {
        token: { colorBgContainer, borderRadiusLG },
      } = theme.useToken();
  return (
    <div>
      <Layout style={{ minHeight: '100vh' }}>
      <Sider collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)}>
        <div className="demo-logo-vertical" />
        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
      </Sider>
      <Layout  className={name }>
        <Header   />
         <Button onClick={zhuti} style={{width:"100px" ,height:"200px"}}>主题切换</Button>
        <Content style={{ margin: '0 16px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>User</Breadcrumb.Item>
            <Breadcrumb.Item>Bill</Breadcrumb.Item>
          </Breadcrumb>
          <div
          className={name1}
          >
           <Outlet></Outlet>
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          Ant Design ©{new Date().getFullYear()} Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
    </div>
  )
}

export default Zhu
